<!--
  * 娃娃列表
  *
  * @Author:    1024创新实验室-主任：卓大
  * @Date:      2022-08-21 19:52:43
  * @Wechat:    zhuda1024
  * @Email:     lab1024@163.com
  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012
-->

<template>
    <a-form class="smart-query-form" v-privilege="'doll:query'">
      <a-row class="smart-query-form-row">
        <a-form-item label="娃娃ID" class="smart-query-form-item">
          <a-input style="width: 300px" v-model:value="queryForm.dollNo" placeholder="娃娃ID" />
        </a-form-item>
  
        <a-form-item label="创建时间" class="smart-query-form-item">
          <a-range-picker v-model:value="createDate" :presets="defaultTimeRanges" @change="createDateChange" style="width: 260px" />
        </a-form-item>
  
        <a-form-item class="smart-query-form-item smart-margin-left10">
          <a-button-group>
            <a-button type="primary" @click="onSearch">
              <template #icon>
                <SearchOutlined />
              </template>
              查询
            </a-button>
          </a-button-group>
        </a-form-item>
      </a-row>
    </a-form>
  
    <a-card size="small" :bordered="false">
      <a-row class="smart-table-btn-block">
        <div class="smart-table-operate-block">
          <a-button type="primary" @click="addOrUpdate()" >
            <template #icon>
              <PlusOutlined />
            </template>
            新建
          </a-button>
        </div>
        <div class="smart-table-setting-block">
          <TableOperator v-model="tableColumns" :refresh="queryDollList" />
        </div>
      </a-row>
  
      <a-table
        rowKey="dollId"
        :columns="tableColumns"
        :dataSource="tableData"
        :scroll="{ x: 1510 }"
        :pagination="false"
        :loading="tableLoading"
        size="small"
        bordered
      >
        <template #bodyCell="{ column, record, text }">
          <template v-if="column.dataIndex === 'imgUrl'">
            <a-image v-if="text" :src="text" style="width: 50px; height: 50px;"></a-image>
          </template>

          <template v-else-if="column.dataIndex === 'action'">
            <div class="smart-table-operate">
              <a-button type="link" @click="addOrUpdate(record)">编辑娃娃</a-button>
              <a-button danger type="link" @click="deleteDoll(record)">删除</a-button>
            </div>
          </template>
        </template>
      </a-table>
  
      <div class="smart-query-table-page">
        <a-pagination
          showSizeChanger
          showQuickJumper
          show-less-items
          :pageSizeOptions="PAGE_SIZE_OPTIONS"
          :defaultPageSize="queryForm.pageSize"
          v-model:current="queryForm.pageNum"
          v-model:pageSize="queryForm.pageSize"
          :total="total"
          @change="queryDollList"
          @showSizeChange="queryDollList"
          :show-total="(total) => `共${total}条`"
        />
      </div>
    </a-card>
  
    <DollFormDrawer ref="dollFormDrawer" @reloadList="queryDollList" />
  </template>
  
  <script setup>
    import { reactive, ref, onMounted } from 'vue';
    import { message, Modal } from 'ant-design-vue';
    import { useRouter } from 'vue-router';
    import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
    
    import { dollApi } from '/@/api/business/bjd/doll-api';
    import DollFormDrawer from './components/add-form.vue';
    import { defaultTimeRanges } from '/@/lib/default-time-ranges';
    import { smartSentry } from '/@/lib/smart-sentry';
    import TableOperator from '/@/components/support/table-operator/index.vue';
    import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
  
    const queryFormState = {
      dollNo: '', //关键字
      createTimeBegin: null, //创建-开始时间
      createTimeEnd: null, //创建-截止时间
      pageNum: 1,
      pageSize: PAGE_SIZE,
    };
    const queryForm = reactive({ ...queryFormState });
  
    const tableColumns = ref([
      {
        title: `照片`,
        dataIndex: 'imgUrl',
        width: 100,
        ellipsis: true,
      },
      {
        title: `娃娃ID`,
        dataIndex: 'dollNo',
        width: 200,
        ellipsis: true,
      },
      {
        title: `官方名称`,
        dataIndex: 'officialName',
        width: 120,
        ellipsis: true,
      },
      {
        title: '类型',
        dataIndex: 'type',
        width: 100,
        ellipsis: true,
      },
      {
        title: `肤色`,
        dataIndex: 'skin',
        width: 80,
        ellipsis: true,
      },
      {
        title: `尺寸`,
        dataIndex: 'size',
        width: 80,
        ellipsis: true,
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        width: 150,
      },
      {
        title: '操作',
        dataIndex: 'action',
        fixed: 'right',
        width: 90,
      },
    ]);
  
    // ------------------ 娃娃类型 ------------------


  
    // ------------------ 查询相关 ------------------
  
    const tableData = ref([]);
    const total = ref(0);
    const tableLoading = ref(false);
  
    onMounted(() => {
      queryDollList();
    });
  
    // 查询列表
    async function queryDollList() {
      try {
        tableLoading.value = true;
        const result = await dollApi.queryPage(queryForm);
        tableData.value = result.data.list;
        total.value = result.data.total;
      } catch (err) {
        smartSentry.captureError(err);
      } finally {
        tableLoading.value = false;
      }
    }
  
    // 点击查询
    function onSearch() {
      queryForm.pageNum = 1;
      queryDollList();
    }
  
    // 点击重置
    function onReload() {
      Object.assign(queryForm, queryFormState);
      createDate.value = [];
      queryDollList();
    }

    function deleteDoll(record) {
      Modal.confirm({
        title: '确认删除?',
        content: `确认删除娃娃: ${record.dollNo}?`,
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
          try {
            var param = {
                id: record.id
            }
            await dollApi.delete(param);
            message.success('删除成功');
            queryDollList();
          }catch (err) {
            smartSentry.captureError(err);
            message.error(err.message);
          }
        }
      })
    }
  
    // 创建日期选择
    const createDate = ref([]);
    function createDateChange(dates, dateStrings) {
      queryForm.createTimeBegin = dateStrings[0] + ' 00:00:00';
      queryForm.createTimeEnd = dateStrings[1] + ' 23:59:59';
    }
  
    // ------------------ 新建 ------------------
  
    // 新建
    const dollFormDrawer = ref();
    
    function addOrUpdate(dollId) {
      console.log("dollId",dollId)
      dollFormDrawer.value.showModal(dollId);
    }
  
    // ------------------ 详情 ------------------
  
    

  </script>
  
  <style lang="less" scoped></style>